<template>
  <!-- 头部 -->
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>商品分类</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 卡片 -->
  <el-card class="box-card">
    <!-- 添加按钮 -->
    <div>
      <el-button type="primary"
                 size="large"
                 @click="add">添加分类</el-button>
    </div>
    <!-- 列表信息 -->
    <div class="py-4">
      <el-table :data="tableData"
                border
                style="width: 100%">
        <el-table-column type="expand">
          <template #default="props">
            <!-- 二级菜单 -->
            <div class="w-[935px] table py-2">
              <!-- {{props.row}} -->
              <el-table :data="props.row.dw_fenns"
                        border
                        style="width: 100%">
                <el-table-column type="index"
                                 label="#" />
                <el-table-column prop="cat_name"
                                 label="分类名称" />
                <el-table-column label="是否有效">
                  <template #default="id">
                    <el-icon>
                      <CircleCheckFilled />
                    </el-icon>
                  </template>
                </el-table-column>
                <el-table-column label="排序">
                  <template #default="id">
                    <el-tag size="large"
                            type="success">二级分类</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="id"
                                 label="操作"
                                 width="220px">
                  <template #default="id">
                    <el-button type="primary"
                               size="large"
                               :icon="Edit"
                               @click="editsTwo(id.row.id)">编辑</el-button>
                    <el-button type="danger"
                               size="large"
                               :icon="Delete"
                               @click="TwoOut(id.row.id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="index"
                         label="#" />
        <el-table-column label="分类名称"
                         prop="cat_name" />
        <el-table-column label="是否有效">
          <template #default="id">
            <el-icon>
              <CircleCheckFilled />
            </el-icon>
          </template>
        </el-table-column>
        <el-table-column label="排序">
          <template #default="id">
            <el-tag size="large">一级分类</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         prop="id"
                         width="375px">
          <template #default="id">
            <el-button type="primary"
                       size="large"
                       :icon="Edit"
                       @click="edits(id.row.id)">编辑</el-button>
            <el-button type="danger"
                       size="large"
                       :icon="Delete"
                       @click="OneOut(id.row.id)">删除</el-button>
            <el-button type="primary"
                       size="large"
                       :icon="Edit"
                       @click="AddTwo(id.row.id)">添加二级分类</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
  <!-- 添加一级分类弹出框 -->
  <el-dialog v-model="addFormVisible"
             title="添加一级分类"
             @close="AddOneClosed">
    <el-form :model="addform">
      <!-- 分类名称 -->
      <el-form-item label="一级分类"
                    :label-width="formLabelWidth">
        <el-input v-model="addform.cat_name"
                  autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addFormVisible = false">取消</el-button>
        <el-button type="primary"
                   @click="AddOneData">确认</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 编辑一级分类分类弹出框 -->
  <el-dialog v-model="EDitFormVisible"
             title="编辑用户">
    <el-form :model="editform">
      <!-- 分类名称 -->
      <el-form-item label="一级分类"
                    :label-width="formLabelWidth">
        <el-input v-model="editform.cat_name"
                  autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="EDitFormVisible = false">取消</el-button>
        <el-button type="primary"
                   @click="EditOneYes(editform.id)">确认</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 添加二级分类弹出框 -->
  <el-dialog v-model="addTwoFormVisible"
             title="添加用户"
             @close="AddTwoClosed">
    <el-form :model="addTwoform">
      <!-- 分类名称 -->
      <el-form-item label="分类二级"
                    :label-width="formLabelWidth">
        <el-input v-model="addTwoform.cat_name"
                  autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addTwoFormVisible = false">取消</el-button>
        <el-button type="primary"
                   @click="AddTwoData">确认</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 编辑二级分类分类弹出框 -->
  <el-dialog v-model="EDitTwoFormVisible"
             title="编辑用户">
    <el-form :model="editTowform">
      <!-- 分类名称 -->
      <el-form-item label="二级分类"
                    :label-width="formLabelWidth">
        <el-input v-model="editTowform.cat_name"
                  autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="EDitTwoFormVisible = false">取消</el-button>
        <el-button type="primary"
                   @click="EditTwoYes(editTowform.id)">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ArrowRight } from '@element-plus/icons-vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import { DataList, AddOneList, AddTwoList, Inquire, InquirePost, InquireTwo, InquireTwoPost, DeleteOne, DeleteTwo } from '@/api/manager.js'
import { ref, reactive } from 'vue'
import { CircleCheckFilled } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// 添加分类
const addform = reactive({
  cat_name: ''
})
// 编辑一级分类
const editform = reactive({
  id: '',
  cat_name: ''
})
// 添加二级分类
const addTwoform = reactive({
  cat_name: ''
})
// 编辑二级分类
const editTowform = reactive({
  id: '',
  cat_name: ''
})

export default {
  name: 'Category',
  components: {
    CircleCheckFilled
  },
  setup () {
    const addFormVisible = ref(false)
    const EDitFormVisible = ref(false)
    const addTwoFormVisible = ref(false)
    const EDitTwoFormVisible = ref(false)
    const tableData = ref([])
    const num = ref(null)
    const formLabelWidth = '80px'
    // Get 请求获取分类列表
    DataList().then(res => {
      tableData.value = res.data.result
    })
    // 点击添加分类弹出弹窗
    const add = () => {
      addFormVisible.value = true
    }
    // 点击删除一级分类
    const OneOut = (value) => {
      ElMessageBox.confirm(
        '确定删除一级分类?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        DeleteOne(value).then(res => {
          ElMessage({
            type: 'success',
            message: '删除成功!',
            duration: 800
          })
          // 调用
          DataList().then(res => {
            tableData.value = res.data.result
          })
        }).catch(err => {
          ElMessage({
            message: err.response.data.message,
            type: 'error',
            duration: 800
          })
        })
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消删除!',
          duration: 800
        })
      })
    }
    // 点击删除二级分类
    const TwoOut = (value) => {
      ElMessageBox.confirm(
        '确定删除二级分类?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        DeleteTwo(value).then(res => {
          console.log(res)
          ElMessage({
            type: 'success',
            message: '删除成功!',
            duration: 800
          })
          // 调用
          DataList().then(res => {
            tableData.value = res.data.result
          })
        }).catch(err => {
          ElMessage({
            message: err.response.data.message,
            type: 'error',
            duration: 800
          })
        })
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消删除!',
          duration: 800
        })
      })
    }
    // 点击编辑弹出弹窗
    const edits = (value) => {
      Inquire(value).then(res => {
        editform.id = res.data.result.id
        editform.cat_name = res.data.result.cat_name
      })
      EDitFormVisible.value = true
    }
    // 点击编辑一级
    const EditOneYes = (value) => {
      InquirePost(editform.cat_name, value).then(res => {
        ElMessage({
          message: res.data.message,
          type: 'success',
          duration: 800
        })
        // 重新调用获取列表接口
        DataList().then(res => {
          tableData.value = res.data.result
        })
        EDitFormVisible.value = false
        editform.cat_name = ''
      }).catch(err => {
        ElMessage({
          message: err.response.data.message,
          type: 'error',
          duration: 800
        })
      })
    }
    // 点击添加一级分类
    const AddOneData = () => {
      AddOneList(addform.cat_name).then(res => {
        ElMessage({
          message: res.data.message,
          type: 'success',
          duration: 800
        })
        // 重新调用获取列表接口
        DataList().then(res => {
          tableData.value = res.data.result
        })
        addFormVisible.value = false
      }).catch(err => {
        ElMessage({
          message: err.response.data.message,
          type: 'error',
          duration: 800
        })
      })
    }
    // 点击编辑二级
    const editsTwo = (value) => {
      InquireTwo(value).then(res => {
        editTowform.id = res.data.result.id
        editTowform.cat_name = res.data.result.cat_name
      })
      EDitTwoFormVisible.value = true
    }
    // 点击编辑添加二级接口
    const EditTwoYes = (value) => {
      InquireTwoPost(editTowform.cat_name, value).then(res => {
        ElMessage({
          message: res.data.message,
          type: 'success',
          duration: 800
        })
        // 重新调用获取列表接口
        DataList().then(res => {
          tableData.value = res.data.result
        })
        editTowform.cat_name = ''
        EDitTwoFormVisible.value = false
      }).catch(err => {
        ElMessage({
          message: err.response.data.message,
          type: 'error',
          duration: 800
        })
      })
    }
    // 点击添加二级分类显示弹窗
    const AddTwo = (value) => {
      num.value = value
      addTwoFormVisible.value = true
    }
    // 点击添加二级分类
    const AddTwoData = () => {
      // console.log(num.value)
      AddTwoList(addTwoform.cat_name, num.value).then(res => {
        ElMessage({
          message: res.data.message,
          type: 'success',
          duration: 800
        })
        // 重新调用获取列表接口
        DataList().then(res => {
          tableData.value = res.data.result
        })
        addTwoFormVisible.value = false
      }).catch(err => {
        ElMessage({
          message: err.response.data.message,
          type: 'error',
          duration: 800
        })
      })
    }
    // 监听关闭一级二级添加窗口
    const AddOneClosed = () => {
      addform.cat_name = ''
    }
    const AddTwoClosed = () => {
      addTwoform.cat_name = ''
    }
    return {
      ArrowRight,
      tableData,
      Edit,
      Delete,
      CircleCheckFilled,
      addFormVisible,
      add,
      addform,
      formLabelWidth,
      OneOut,
      editform,
      EDitFormVisible,
      edits,
      AddOneData,
      AddOneList,
      AddTwo,
      addTwoFormVisible,
      addTwoform,
      AddTwoData,
      num,
      AddTwoList,
      Inquire,
      InquirePost,
      EditOneYes,
      editsTwo,
      editTowform,
      EDitTwoFormVisible,
      InquireTwo,
      EditTwoYes,
      InquireTwoPost,
      AddOneClosed,
      AddTwoClosed,
      DeleteOne,
      TwoOut,
      DeleteTwo
    }
  }
}
</script>

<style lang="less" scoped>
.box-card {
  width: 100%;
  margin-top: 20px;
}
.table {
  margin-left: 48px;
}
</style>